<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.bootcdn.net/ajax/libs/d3/3.0.0/d3.min.js"></script>
	<title>vichun-CSDN</title>
</head>
<body>
 
	<script>
		let data={
			'nodes':[
				{'food':'西红柿'},
				{'food':'茄子'},
				{'food':'胡萝卜'},
				{'food':'辣椒'},
				{'food':'土豆'},
				{'food':'白菜'},
				{'food':'粉条'},
				{'food':'山药'}
			],
 
			'links':[
				{source:0,target:1},
				{source:0,target:2},
				{source:0,target:3},
				{source:0,target:4},
				{source:0,target:5},
				{source:0,target:6},
				{source:0,target:7}
			]
		};
		
		let nodes = data.nodes;
		let links = data.links;
		
		let width = 800;
		let height = 800;
		
		let svg = d3.select('body')
		.append('svg')
		.attr('width',width)
		.attr('height',height);
		
		let force = d3.layout.force()
		.nodes(nodes) //设定节点数组
		.links(links) //设定关系数组
		.size([width,height]) //设定作用域的范围
		.linkDistance(30) //设定关系连线的长度
		.distance(10)
		.charge(-1500); //节点间的相互作用力
 
		force.start(); //开始引力作用
		
		
	//	定义一个颜色生成器，由d3提供
		let color = d3.scale.category20(); //20表示可以生成20种不同的颜色
		
	//	下边开始绘制
		//	绘制节点间的关系连线
		let linksLine = svg.selectAll('line')
		.data(links)
		.enter()
		.append('line')
		.style('stroke','#ccc')
		.style('stroke-width',2);
		
	//	绘制节点
		let nodesCic = svg.selectAll('circle')
		.data(nodes)
		.enter()
		.append('circle')
		.attr('r',25)
		.style('fill',function(d,i){
			return color(i); //根据自身的索引号，自动随机获取一种背景颜色
		})
		.call(force.drag); //调用drag函数，是的节点可以拖动
		
	//	给节点添加名称
		let nodesTitle = svg.selectAll('text')
		.data(nodes)
		.enter()
		.append('text')
		.style('fill','#fff')
		.attr("text-anchor", "middle") //是的文字居中显示在节点上
		// .attr('dx',20) //自定义文字的x坐标
		// .attr('dy',5) //自定义文字的y坐标
		.text(function(d){
			return d.food;
		});
		
		force.on('tick',tick);
		
		function tick(){
			//	更新连线的坐标
			linksLine.attr('x1',function(d){return d.source.x;})
			.attr('y1',function(d){return d.source.y;})
			.attr('x2',function(d){return d.target.x;})
			.attr('y2',function(d){return d.target.y;});
			
		//	更新节点坐标
			nodesCic.attr('cx',function(d){return d.x;})
			.attr('cy',function(d){return d.y});
			
		//	更新文字坐标
			nodesTitle.attr('x',function(d){return d.x})
			.attr('y',function(d){return d.y + 5});
		
		}
		
	</script>
 
</body>
</html>